<!--
 * @Descripttion: 上传Excel文件
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-23 22:22:47
 * @LastEditors: 淏
 * @LastEditTime: 2023-12-02 16:38:27
-->
<template>
  <div>
    <el-upload
      class="upload-demo"
      action="#"
      :http-request="uploadFile"
      drag
      :limit="1"
      accept=".xls, .xlsx"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :file-list="fileList"
      :auto-upload="true"
      :show-file-list="false"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text" style="color: #ffffff">
        将文件拖到此处，或
        <em style="color: #00ffff">点击上传</em>
      </div>
    </el-upload>
  </div>
</template>

<script>
  import { uploadExcel_import } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'uploadExcel',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
      return { fileList: [] }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      //文件个改变的钩子函数
      handleChange(file, fileList) {
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的文件
        }
      },
      //上传文件前的钩子函数
      beforeUpload(file) {
        var isExcel = true
        if (
          file.type === 'application/vnd.ms-excel.sheet.macroEnabled.12' ||
          file.type == 'application/vnd.ms-excel' ||
          file.type == 'application/x-excel' ||
          file.type ==
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        ) {
          isExcel = true
        } else {
          isExcel = false
        }
        if (!isExcel) {
          this.$notify.error({
            title: '错误',
            message: '上传格式有误!',
          })
          return isExcel
        }
      },
      uploadSuccess(response, file, fileList) {
        console.log('response')
        console.log(response)
        console.log('file')
        console.log(file)
        /*    console.log('fileList')
        console.log(fileList) */
      },
      uploadFile(file) {
        let _this = this
        if (file) {
          var files = file.file
          let formData = new FormData()
          formData.append('excel', files)
          /*       _this.loading = _this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          }) */
          uploadExcel_import(formData).then((res) => {
            this.$emit('getExcel', res)
            this.$notify({
              title: '成功',
              type: 'success',
              message: '上传成功!',
            })
            /*   _this.loading.close() */
          })
        }
      },
    },
    created() {},
    mounted() {},
  }
</script>

<style lang="less">
  .el-upload {
    background: rgba(48, 89, 224, 0);
    border: 1px solid #295a85;
    width: 500px;
    height: 300px;
    .el-upload-dragger {
      border: 1px solid #295a85;
      background: rgba(48, 89, 224, 0.2);
      width: 500px;
      height: 300px;
      .el-icon-upload {
        margin: 18% 0 16px;
        font-size: 100px;
      }
    }
  }
</style>
